<template>
  <view>
    <view class="table-header">
      <view class="table-cell">开始时间</view>
      <view class="table-cell">结束时间</view>
      <view class="table-cell">申请状态</view>
      <view class="table-cell">申请原因</view>
      <view class="table-cell">申请类型</view>
    </view>
    <view class="table-body">
      <view class="table-row" v-for="(item, index) in history" :key="index">
        <view class="table-cell">{{ item.startTime }}</view>
        <view class="table-cell">{{ item.endTime }}</view>
        <view class="table-cell">{{ item.status }}</view>
		 <view class="table-cell">{{ item.reason }}</view>
		 <view class="table-cell">{{ item.type }}</view>
		 
      </view>
    </view>
  </view>
</template>
<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				 history: [
					],
				info:null		
			}
		},
		mounted(){
			let that = this
			uni.getStorage({
				key:'info',
				success:function(res){
					let info = JSON.parse(res.data)
					uni.request({
						url:'http://localhost:8085/api/absence/person',
						data:{user_id:info.user_id},
						method:'GET',	
						header : {'content-type':'application/x-www-form-urlencoded'},
						success:function(res){
							let response = res.data 
							if(response.code === 200){
								that.history = response.data
								let mapping = {0:'未审核',1:'通过',2:'驳回'}
								that.history.map(item=>{
									item.startTime = dayjs(item.startTime).format('YYYY-MM-DD ')
									item.endTime = dayjs(item.endTime).format('YYYY-MM-DD ')
									item.status = mapping[+item.status]
								})
							}
							
						}
					})
				}
			})
		},
		methods: {
			format:function (){
				
			}
		}
	}
</script>

<style>
.table-header {
  display: flex;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}
.table-body{
	overflow-x: auto;
}
.table-cell {
  flex: 1;
  display: inline-block;
  padding: 10px;
}

.table-row:nth-child(odd) {
  background-color: #fff;
}

.table-row:nth-child(even) {
  background-color: #f7f7f7;
}

.table-row:hover {
  background-color: #eee;
}

.table-row:active {
  background-color: #ddd;
}

</style>